<template>
  <div class="container">
    <div class="card card-login mx-auto mt-5 col-lg-6 col-lg-offset-3">
      <div class="card-header title"><h1 class="text-info text-uppercase">开源跳板机</h1></div>
      <div class="card-body">
        <form @submit.prevent="submit">
          <div class="form-group">
            <div class="form-label-group">
              <label for="inputUser">用户名</label>
              <input v-model="loginForm.username" type="text" id="inputUser" class="form-control" placeholder="输入用户名" required="required"
              autofocus="autofocus">
            </div>
          </div>
          <div class="form-group">
            <div class="form-label-group">
              <label for="inputPassword">密码</label>
              <input v-model="loginForm.password" type="password" id="inputPassword" class="form-control" placeholder="密码" required="required">
            </div>
          </div>
          <div class="form-group">
                <p class="text-danger">{{ msg }}</p>
          </div>
          <input class="btn btn-primary btn-block" type="submit" value="登陆">
        </form>
      </div>
    </div>
  </div>
</template>
<script>
  import api from '../api/user';
  import {setSession,getCookie} from '../utils/cookie';
  export default {
    name: 'login',
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        msg:""
      }
    },
    created() {
    },
    computed: {
    },
    methods: {
      async submit() {
           await api.login(this.loginForm,function (res) {
             if (!res.data.status){
                alert(res.data.response)
             }else {
                setSession(res.data.response)
                location.href = '/'
             }
          })
      }
    }
  }
</script>
<style lang="less" rel="stylesheet/less">
  .openssh-btn {
    margin: 20px 0px;
  }
  .title{
    margin-top: 100px;
    margin-bottom: 20px;
  }
</style>
